<template>
    <el-dialog class="eldialog" title="流程详情" :visible.sync="open" width="60%" append-to-body :before-close="closeDelDialog">
        <el-row>
            <el-col :span="8" class="flexName">
                <label>鉴定任务名称：</label>
                <el-input v-model="info.JIANDINGRENWUNAME" placeholder=""></el-input>
            </el-col>
        </el-row>
        <div>
            <ul class="flowMain">
                <li v-for="item in  jiandingstatelist " :key="item.dictValue">

                    <em v-if="item.dictValue == '1' && !item.stateCXType" class="medium"
                        :class="item.stateType == true ? 'avticeSTATE' : ''">{{ item.dictLabel }}
                    </em>
                    <em v-else-if="item.dictValue == '8' && !item.stateCXType" class="medium"
                        :class="item.stateType == true ? 'avticeEND' : ''">{{ item.dictLabel }}
                    </em>
                    <em v-else-if="item.stateCXType == '9'" class="medium avticeCX"
                        :class="item.stateCXType == '9' ? 'avticeCX' : ''">{{ item.dictLabel }}
                    </em>
                    <em class="medium" :class="item.stateType == true ? 'avtice' : ''"
                        v-else-if="item.dictValue != '9' && item.dictValue != '4'">{{
                            item.dictLabel }}</em>

                    <template v-else-if="item.dictValue == 4">
                        <em class=" medium" :class="item.stateType == true ? 'avtice' : ''"
                            v-if="item.STARTTIMENext == undefined && item.STARTTIME == null">{{
                                item.dictLabel }}</em>

                        <em class="medium" :class="item.stateType == true ? 'avtice' : ''"
                            v-else-if="item.STARTTIMENext == undefined && item.STARTTIME != null">{{
                                item.dictLabel }}</em>


                        <em class="medium" :class="item.stateType == true ? 'avtice' : ''"
                            v-else-if="item.STARTTIMENext != undefined && item.STARTTIME != null">{{
                                item.dictLabel }} </em>


                        <div v-if="item.STARTTIMENext != undefined && item.STARTTIME != null"
                            :class="item.stateType == true ? 'divAvtice' : ''">
                            <p></p>
                            <span></span>
                        </div>

                        <div v-if="item.dictValue == '4' && item.STARTTIMENext == undefined && STARTTIME == null"
                            :class="item.stateType == true ? 'divAvtice' : ''">
                            <p></p>
                            <span></span>
                        </div>
                    </template>
                    <div v-if="item.dictValue != '9' && item.dictValue != '8' && item.dictValue != '4'"
                        :class="item.stateType == true ? 'divAvtice' : ''">
                        <p></p>
                        <span></span>
                    </div>
                </li>
            </ul>
        </div>
        <div style="margin-top:20px">
            <el-table v-loading="loading" :data="list" border>
                <el-table-column label="序号" align="center" type="index" />
                <el-table-column label="节点名" align="center" prop="NODE" />
                <el-table-column label="操作人" align="center" prop="CAOZUORENNAME" />
                <el-table-column label="接收时间" align="center" prop="STARTTIME" />
                <el-table-column label="完成时间" align="center" prop="ENDTIME" />
            </el-table>
        </div>
    </el-dialog>
</template>
<script>
import { getjobinfo, followd } from "@/api/archive/archivalAppraisal/openness/openArchivesAppraisal"
import { getDicts_archive } from '@/api/archive/dict/dictManageData'
import deitVue from '../../../../filesManage/editReleaseManage/infoRelease/deit.vue'
export default {
    // archive_Dicts:['JDZT'],
    props: ['open', 'rowInfo'],
    watch: {
        rowInfo: {
            handler(valNew) {

                if (valNew) {
                    var that = this;
                    getDicts_archive("JDZT").then(resJDZT => {
                        that.jiandingstatelist = resJDZT.data;
                        getjobinfo(valNew).then(res => {
                            that.info = res.data.jobinfo;
                            followd(res.data.jobinfo.ID).then(resLIST => {
                                that.loading = false


                                for (var k in resLIST.data) {
                                    if (resLIST.data[k].STATUS == '9') {
                                        delete resLIST.data[k]
                                    }

                                    if (resLIST.data[k] != undefined) {
                                        if (resLIST.data[k].STATUS == '4') {

                                            resLIST.data[k]["STARTTIMENext"] = resLIST.data[parseInt(k) + 1].STARTTIME;
                                            if ((resLIST.data[k].STARTTIMENext == undefined && resLIST.data[k].STARTTIME == null) || (resLIST.data[k].STARTTIMENext == undefined && resLIST.data[k].STARTTIME != null) || (resLIST.data[k].STARTTIMENext != undefined && resLIST.data[k].STARTTIME != null)) {

                                            } else {

                                                delete resLIST.data[k]
                                            }
                                        }
                                    }

                                }



                                console.log(resLIST.data)
                                that.list = resLIST.data



                                // that.list=list;
                                for (var i in that.jiandingstatelist) {
                                    for (var j in resLIST.data) {
                                        if (that.jiandingstatelist[i].dictValue == resLIST.data[j].STATUS) {
                                            that.jiandingstatelist[i]['STARTTIME'] = resLIST.data[j].STARTTIME;

                                        }
                                    }


                                }


                                for (var j in that.jiandingstatelist) {
                                    if (that.jiandingstatelist[j].dictValue == 4) {
                                        that.jiandingstatelist[j]['STARTTIMENext'] = that.jiandingstatelist[parseInt(j) + 1].STARTTIME;
                                    }
                                }

                                if (that.info.JIANDINGSTATE != '9') {

                                    for (var i in that.jiandingstatelist) {

                                        that.jiandingstatelist[i].stateType = true;

                                        if (that.jiandingstatelist[i].dictValue == that.info.JIANDINGSTATE) {
                                            // break;
                                            return
                                        }
                                    }
                                } else {
                                    for (var i in that.jiandingstatelist) {
                                        that.jiandingstatelist[i].stateCXType = "9";
                                    }
                                }






                            })




                        })
                    }).catch(error => {
                    })




                }
            }, immediate: true
        },
    },
    data() {
        return {
            loading: true,
            info: "",
            jiandingstatelist: [],
            list: []
        }
    },
    created() {
        // this.followdPost(res.data.jobinfo);

    },
    methods: {
        //列表
        // followdPost(row) {
        //     followd(row.ID).then(res => {
        //         var data = [];
        //         console.log(res, "dksfjklsdjfkl")
        //         this.list = res.data;
        //         this.loading = false
        //     })
        // },
        closeDelDialog() {
            this.jiandingstatelist = [];
            this.$emit("closeDelDialog")
        }
    }
}
</script>
<style lang="scss" scoped="scoped" >
div ul li p {
    margin: 0;
    padding: 0;
}

.eldialog ::v-deep .el-dialog__body {
    padding: 10px 20px 25px !important;
}

.eldialog ::v-deep .el-dialog {
    // padding: 0 20px 20px 20px !important;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

.eldialog ::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow-x: hidden;
}

.eldialog ::v-deep ::v-deep .el-form-item__content {
    line-height: 26px;
}

.eldialog .elinput {
    border: 0 !important
}

.eldialog .flexName {
    display: flex;
    flex-direction: row;
    height: 50px;
    line-height: 50px;
    margin-bottom: 20px;

    label {
        width: 185px;
        font-size: 17px;
    }

    ::v-deep input {
        // border:0!important;
    }
}

// 流程图样式
.flowMain {
    overflow: hidden;
}

.flowMain li {
    display: flex;
    float: left;
    margin-bottom: 10px
}

.flowMain em {
    font-style: normal;
    display: block;
    height: 46px;
    line-height: 46px;
    padding: 0 28px;
    //    color: #1890ff;
    //     border: 1px solid #badeff;
    //     background-color: #e8f4ff;
    color: #606266;
    border: 1px solid #DCDFE6;

    border-radius: 5px;
}

.avtice {
    background: #1890ff;
    color: #fff !important;
}

.avticeSTATE {
    background: #e6a23c;
    color: #fff !important;
}

.avticeCX {
    background: #DCDFE6;
    color: #fff !important;

}

.avticeEND {
    background: #67c23a;
    color: #fff !important;
}

.divAvtice p {
    background: #1890ff !important;
}

.divAvtice span {
    border-left: 10px solid #1890ff !important;
}

.flowMain .medium {
    border-radius: 30px;
}

.flowMain div {
    width: 36px;
    height: 46px;
    position: relative;
    margin: 0 5px;

}

.flowMain div p {
    width: 100%;
    height: 1px;
    background: #DCDFE6;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.flowMain div span {
    display: block;
    width: 0;
    height: 0;
    border-left: 10px solid #DCDFE6;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}
</style>